<template>
  <AppPage :show-footer="true">
    <div class="flex">
      <n-card class="w-40%">
        <div class="flex items-center">
          <n-avatar round :size="60" :src="userStore.userInfo.avatar_url" />
          <div class="ml-20 flex-col">
            <span class="text-20 opacity-80">Hello, {{ userStore.userInfo.nickname }}</span>
            <span class="mt-4 opacity-50">今日事，今日毕。</span>
          </div>
        </div>
        <p class="mt-20 text-14 opacity-60">一个人几乎可以在任何他怀有无限热忱的事情上成功。</p>
        <p class="mt-12 text-right text-12 opacity-40">—— 查尔斯·史考伯</p>
      </n-card>
      <n-card class="ml-12 w-60%">
        <h3 class="text-20 font-normal opacity-90">⚡️欢迎使用 在线预约挂号后台系统</h3>
        <p class="mt-8 opacity-60">
          这是一种用于管理医院或诊所预约挂号流程的软件系统。它提供了一种方便、高效的方式，让医院和患者能够在线进行预约挂号、管理预约信息和优化医疗资源的分配。
        </p>
        <!-- <footer class="mt-24 flex items-center justify-end">
          
        </footer> -->
      </n-card>
    </div>
    <div class="mt-12 flex">
      <n-card title="今日预约" segmented>
        <template #header-extra>
          <n-button text type="primary">更多</n-button>
        </template>
        <n-spin size="medium" v-if="loding" style="margin: auto;"/>
        <n-empty description="暂无数据" v-if="bookingHistorys.length==0"></n-empty>
        <div class="flex flex-wrap justify-between" v-if="!loding">
          <div v-for="booking in bookingHistorys"
              :key="booking">
              
            <n-card
              size="small"
              class="my-6 w-320 flex-shrink-0 cursor-pointer hover:card-shadow"
              :title="booking.booking.rank+ ' ' + booking.card.name"
            >
              <p class="op-60">{{ booking.card.id_number }}</p>
              <div>
                <div style="display: flex;">
                  <n-button type="info" size="tiny" style="margin: 5px 10px;" @click="toCall(booking)">叫号</n-button>
                  <n-button type="warning" size="tiny" style="margin: 5px 10px;" >就诊</n-button>
                </div>
              </div>
            </n-card>
          </div>
          
        </div>
      </n-card>

      <!-- <n-card class="ml-12" title="技术栈" segmented>
        <VChart :option="skillsOption" class="wh-full" autoresize />
      </n-card> -->
    </div>

    <n-card class="mt-12" title="预约人数统计" segmented v-if="!loding">
      <VChart :option="trendOption" class="h-480 w-full" autoresize />
    </n-card>
  </AppPage>
</template>

<script setup>
import { useUserStore } from '@/store'
import * as echarts from 'echarts/core'
import { TooltipComponent, GridComponent, LegendComponent } from 'echarts/components'
import { BarChart, LineChart, PieChart } from 'echarts/charts'
import { UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
import api from './api'
import VChart from 'vue-echarts'
import { onBeforeMount, onMounted, onBeforeUnmount, onUnmounted } from "vue";
import {formatDate} from "../../utils/common/common"

onBeforeMount(() => {
  console.log("组件挂载前");
});


const userStore = useUserStore()
let bookingHistorys = ref([])
const loding =  ref(true)
onMounted(async () => {
  loding.value = true
  let t = formatDate(new Date())
  const res = await api.getBookingHistorys(
    {
      pageNo: 1,
      pageSize: 10,
      doctor_id: userStore.userInfo.id,
      date: t,
    },
    userStore.userInfo.department_id)
  console.log(res.data.pageData)
  bookingHistorys = res.data.pageData

  // 统计数据
  const temp = await api.getBookingStatisticsByDept(userStore.userInfo.department_id)
  trendOption.series.push({
      name: '去年',
      yAxisIndex: 1,
      type: 'line',
      data: temp.data[1],
  })

  trendOption.series.push({
      name: '今年',
      yAxisIndex: 1,
      type: 'bar',
      data: temp.data[0],
  })

  let max = 0
  for (let i = 0; i < 2; i++){
    for (let j = 0; j < 12; j++){
      if (max < temp.data[i][j]) {
        max = temp.data[i][j]
      }
    }
  }
  trendOption.yAxis.push({
      type: 'value',
      min: 0,
      max: max,
      interval: 5,
      axisLabel: {
        formatter: '{value}',
      },
  })
  trendOption.yAxis.push({
      type: 'value',
      min: 0,
      max: max,
      interval: 5,
      axisLabel: {
        formatter: '{value}',
      },
  })
    
  loding.value = false
})

const toCall = (booking) => {
  console.log(booking)
  $message.success(
    "已通知患者前来就诊"
  )
}


echarts.use([
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  LineChart,
  CanvasRenderer,
  UniversalTransition,
  PieChart,
])

const trendOption = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999',
      },
    },
  },
  legend: {
    top: '5%',
    data: ['去年','今年'],
  },
  xAxis: [
    {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      axisPointer: {
        type: 'shadow',
      },
    },
  ],
  yAxis: [],
  series: [],
}

const skillsOption = {
  tooltip: {
    trigger: 'item',
    formatter({ name, value }) {
      return `${name} ${value}%`
    },
  },
  legend: {
    left: 'center',
  },
  series: [
    {
      top: '7%',
      type: 'pie',
      radius: ['40%', '85%'],
      avoidLabelOverlap: true,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2,
      },
      label: {
        show: false,
        position: 'center',
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 36,
          fontWeight: 'bold',
        },
      },
      labelLine: {
        show: false,
      },
      data: [
        { value: 38.5, name: 'Vue' },
        { value: 37.0, name: 'JavaScript' },
        { value: 6.5, name: 'CSS' },
        { value: 6.2, name: 'HTML' },
        { value: 1.8, name: 'Other' },
      ],
    },
  ],
}
</script>
